import {AfterContentInit, Directive, ElementRef, EventEmitter, Input, Output} from '@angular/core';

@Directive({
    selector: '[app-focus-blur]',
    standalone: true,
})
export class FocusBlurDirective implements AfterContentInit {
    @Input() focusColor = '';
    @Output() focusBlurEvent = new EventEmitter<'focus' | 'blur'>();

    #originBgColor = '';
    constructor(
        readonly el: ElementRef<HTMLElement>
    ) {
        console.log('FocusBlurDirective run');
    }

    ngAfterContentInit() {
        const node = this.el.nativeElement;
        if (node) {
            this.#originBgColor = node.style.backgroundColor;
            node.addEventListener('focus', () => {
                node.style.backgroundColor = this.focusColor;
                this.focusBlurEvent.emit('focus');
            }, {
                passive: true,
                capture: true
            });

            node.addEventListener('blur', () => {
                node.style.backgroundColor = this.#originBgColor;
                this.focusBlurEvent.emit('blur');
            }, {
                passive: true,
                capture: true
            });
        }
    }
}
